<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {% block meta %}<!-- block meta  -->{% endblock %}
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <title>{% block title %} ? {% endblock %} | Website</title>
    <style>
        body {
          background-image: url('/static/leimu.jpg');
        }
        body, wrapper {
          min-height:100vh;
        }
        .flex-fill {
          flex:1 1 auto;
        }
        main > .container {
          padding: 5px 15px 0;
        }

        .footer {
          background-color: #f5f5f5;
          padding: 15px;
          color: #444;
          border-top: 1px solid #d2d6de;
        }

        .footer > .container {
          padding-right: 15px;
          padding-left: 15px;
        }

        code {
          font-size: 80%;
        }
        /***
        Styles below are only required if you're using <iframe> fallback in
        addition to HTML5 drag & drop (only working in Firefox/Chrome/Opera 15+).
      ***/

      /* Essential FileDrop zone element configuration: */
      .fd-zone {
        position: relative;
        overflow: hidden;
        /* The following are not required but create a pretty box: */
        width: 15em;
        margin: 0 auto;
        text-align: center;
      }
      /* Hides <input type="file"> while simulating "Browse" button: */
      .fd-file {
        opacity: 0;
        font-size: 118px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        padding: 0;
        margin: 0;
        cursor: pointer;
        filter: alpha(opacity=0);
        font-family: sans-serif;
      }
      /* Provides visible feedback when user drags a file over the drop zone: */
      .fd-zone.over { border-color: maroon; background: #eee; }
    </style>
    {% block beforehead %}<!-- before head  -->{% endblock %}
  </head>
  <body>
    <wrapper class="d-flex flex-column">
      <!--header-->
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="/">Website</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item active">
              <a class="nav-link" href="/blogs">日志 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/users">用户</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="/tools" id="tools" role="button" tabindex="-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">工具</a>
              <div class="dropdown-menu" aria-labelledby="tools">
                <a class="dropdown-item" href="/clipboard">Clipboard</a>
                <a class="dropdown-item" href="/pan">Clipboard</a>
              </div>
            </li>
          </ul>
          <div class="mr-5 d-flex justify-content-end align-items-center dropdown">
            {% if __user__ %}
            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ __user__.name }}</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="/logout">logout</a>
            </div>
            {% else %}
            <a class="btn btn-sm btn-outline-secondary mr-3" href="/register">注册</a>
            <a class="btn btn-sm btn-outline-secondary mr-3" href="/login">登录</a>
            {% endif %}
          </div>
        </div>
      </nav>
      <!--header-->
      <!-- content -->
      <main class="flex-fill">
        {% block content %}
        {% endblock %}
      </main>
      <!-- // content -->
      <!--footer-->
      <footer class="footer">
        <div class="pull-right hidden-xs">
          <b>Version</b> 1.0.0
        </div>
        <strong>Copyright &copy; 2018-2020 <a href="#">Shadaileng Studio</a>.</strong> All rights
        reserved.
      </footer>
      <!--footer-->
    </wrapper>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/js-sha1/0.6.0/sha1.js"></script>
    <script src="/static/filedrop.js"></script>
    {% block beforebody %}<!-- before body  -->{% endblock %}
  </body>
</html>
